<template>
  <div class="rx-msgbox" :type="msgtype">
    <div class="grab" v-drag></div>
    <div class="main">
          <div class="title">
          <rx-icon name="rxmsgbox-success"/>
          <rx-icon name="rxmsgbox-info"/>
          <rx-icon name="rxmsgbox-warn"/>
          <rx-icon name="rxmsgbox-error"/>
          <span class="title-content" v-html="title"></span>
    </div>
    <div class="content" v-if="content" v-html="content"></div>
    <div class="footer">
      <slot name=footer></slot>
    </div>
    </div>
  </div>
</template>

<script>
import { getMinSize } from "../../../rxtools/src/brower/element";
export default {
  name: "rx-msgbox",
  props: {
    msgtype: {
      type: String,
      default: "warn"
    },
    title: {
      type: String,
      default: "提示"
    },
    content: {
      type: String,
      default: ""
    }
  },
  mounted() {
    //自适应宽度
    var node=this.$el.cloneNode(true);
    node.style.position='relative'
    node.style.whiteSpace="nowrap"
    var size =getMinSize(node)
    this.$el.style.width=size.width+'px'
  },
};
</script>

<style lang="scss">
.rx-msgbox {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  background-color: #fff;
  min-width: 450px;
  max-width: 700px;
  border-radius: 8px;

  .grab {
    height: 40px;
  }
  .main {
    padding: 0 40px 110px 40px;
    min-height: 190px;
  }

  .title {
    color: #000000;
    font-size: 18px;
    font-weight: bold;

    svg.rx-icon {
      margin-right: 12px;
      font-size: 32px;

      &[name="rxmsgbox-success"],
      &[name="rxmsgbox-error"],
      &[name="rxmsgbox-warn"],
      &[name="rxmsgbox-info"] {
        display: none;
      }
    }
    .title-content {
      display: inline-block;
      width: calc(100% - 44px);
      vertical-align: top;
      margin-top: 3px;
    }
  }
  $types: (
    (
      type: "success",
      color: #66c23a
    ),
    (
      type: "warn",
      color: #ffab1d
    ),
    (
      type: "error",
      color: #f04134
    ),
    (
      type: "info",
      color: #108ee9
    )
  );
  @for $i from 1 through length($types) {
    $item: nth($types, $i);

    &[type="#{map-get($item, type)}"] {
      .title svg.rx-icon[name="rxmsgbox-#{map-get($item, type)}"] {
        display: inline;
        color: #{map-get($item, color)};
      }
    }
  }
  .content {
    margin-top: 30px;
  }
  .footer {
    text-align: right;
    position: absolute;
    bottom: 40px;
    right: 40px;

    .rx-btn {
      margin-left: 10px;
    min-width: 80px;
    padding: 9px;
    }
  }
}
</style>
